<script>
import QuickLayout from '@/components/EmpsLayout/index.vue'
import ProcessImage from '@/components/PrcoessImage/index.vue'
import {parseTime} from "../../../utils/ruoyi";

export default {
  name: 'SystemMenu',
  components: { ProcessImage, QuickLayout },
  data() {
    return {
      visible: false,
      dataListUrl: '/process-instance/myProInstPage',
      deleteUrl: '/sys/menu',
      processDefinitionId: null,
      processInstanceId: null,
      businessKey: null
    }
  },
  methods: {
    parseTime,
    openView(row) {
      this.processDefinitionId = row.processDefinitionId
      this.processInstanceId = row.processInstanceId
      this.businessKey = row.businessKey
      this.visible = true
    },
    handleDetail(row) {

    }
  }
}
</script>

<template>
  <quick-layout
    ref="RefMenu"
    row-key="id"
    :is-operate-btn="false"
    :is-operate="false"
    :data-list-url="dataListUrl"
    :delete-url="deleteUrl"
    size="small"
  >
    <template #query="{query}">
      <el-form-item label="查询">
        <el-input v-model="query.name" placeholder="请输入关键字" />
      </el-form-item>
    </template>
    <template>
      <el-table-column label="标题" header-align="center" align="left" prop="name" show-overflow-tooltip>
        <template v-slot="scope">
          <el-button type="text" size="mini" @click="handleDetail(scope.row)">
            <span style="text-align: left">{{ scope.row.name }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="所属流程" header-align="center" align="center" prop="processDefinitionName" width="250" :show-overflow-tooltip="true">
        <template v-slot="scope">
          <el-button size="mini" type="text" title="查看" @click="openView(scope.row)">{{ scope.row.processDefinitionName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="70">
        <template v-slot="scope">
          <span v-if="scope.row.endTime == null">未办结</span>
          <span v-if="scope.row.endTime != null" type="success">已办结</span>
        </template>
      </el-table-column>
      <el-table-column v-if="$store.state.user.userId === 1" label="发起人" width="70" align="center" prop="startUserName" />
      <el-table-column label="创建时间" align="center" prop="startTime" width="140">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="140">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
    </template>

    <template #component>
      <el-dialog title="查看流程图" modal-append-to-body :visible.sync="visible" width="70%">
        <process-image :process-definition-id="processDefinitionId" :business-key="businessKey" :process-instance-id="processInstanceId" />
      </el-dialog>
    </template>
  </quick-layout>
</template>

<style scoped lang="scss">

</style>

